<template>
    <div :id="id" class="cmp cmp-polyvplayer"></div>
</template>

<script>
export default {
  name: 'cmp-polyvplayer',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
        id: 'polyvplayer_' + `${Math.random()}`.substring(2),
        videoObj: null,
    }
  },
  beforeDestroy () {
    this.videoObj && this.videoObj.destroy()
  },
  methods: {
    // 播放
    play () {
        if (!window.polyvPlayer) return
        if (!this.options.url && !this.options.vid) {
            this.$toast('请输入视频地址或视频vid')
            return
        }
        this.videoObj && this.videoObj.destroy()
        let params = {
            wrap: `#${this.id}`,
            width: '100%',
            height: '100%',
            autoPlay: true,
            vid : this.options.vid || '',
            url : this.options.url || '',
        }
        this.videoObj = window.polyvPlayer(params)
    },
    // 暂停
    pause () {
        this.videoObj && this.videoObj.pause()
    },
    // 销毁
    destroy () {
        this.videoObj && this.videoObj.destroy()
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.cmp-polyvplayer {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #333;
}
</style>
